<template>
	<!-- 是否启用 vue-router 模式。 
        启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 
    -->
	<el-menu
		active-text-color="#79bbff"
		background-color="#1e2e3d"
		text-color="#fff"
		class="el-menu-vertical-demo"
		:collapse="!isCollapse"
		router
		:default-active="'sys'"
		:default-openeds="['sys/menu']"
	>
		<NavMenu v-for="item in menuList" :menu="item" :key="item.path"></NavMenu>
	</el-menu>
</template>

<script setup lang="ts">
import { useMenuStore } from '@/stores/modules/menu'
import { computed, inject } from 'vue'
import NavMenu from './NavMenu.vue'
import {
	Location,
	Grid,
	Setting,
	Service,
	User,
	Aim,
	Goods,
	Present,
	Calendar,
	OfficeBuilding,
	School
} from '@element-plus/icons-vue'
// 方法四: 跨组件通讯
const isCollapse = inject('isCollapse')
const menuStore = useMenuStore()
const menuList = computed(() => menuStore.list) //动态菜单数据

/**
 * 递归菜单测试数据
 */
const menuListTest = [
	{
		id: 5,
		label: '商城系统',
		iconCls: 'el-icon-goods',
		path: '/main_shop',
		meta: {
			title: '商城系统',
			requireAuth: true
		},
		children: [
			{
				id: 8,
				label: 'Banner',
				iconCls: '',
				path: '/shop/banner',
				meta: {
					title: 'Banner',
					requireAuth: false
				}
			},
			{
				id: 7,
				label: '商品分类',
				iconCls: 'el-icon-camera',
				path: '/shop/category',
				meta: {
					title: '商品分类',
					requireAuth: false
				}
			},
			{
				id: 6,
				label: '商品管理',
				iconCls: 'el-icon-s-order',
				path: '/shop/goods',
				meta: {
					title: '商品管理',
					requireAuth: false
				}
			},
			{
				id: 11,
				label: '购物车',
				iconCls: '',
				path: '/shop/cart',
				meta: {
					title: '购物车',
					requireAuth: false
				}
			},
			{
				id: 10,
				label: '订单管理',
				iconCls: '',
				path: '/shop/order',
				meta: {
					title: '订单管理',
					requireAuth: false
				}
			},
			{
				id: 9,
				label: '会员管理',
				iconCls: '',
				path: '/shop/member',
				meta: {
					title: '会员管理',
					requireAuth: false
				}
			},
			{
				id: 37,
				label: '商家管理',
				iconCls: '',
				path: '/shop/store',
				meta: {
					title: '商家管理',
					requireAuth: false
				}
			}
		]
	},
	{
		id: 12,
		label: 'OA办公系统',
		iconCls: 'el-icon-box',
		path: '/main_oa',
		meta: {
			title: 'OA办公系统',
			requireAuth: true
		},
		children: [
			{
				id: 13,
				label: '添加日志',
				iconCls: '',
				path: '/log/add',
				meta: {
					title: '添加日志',
					requireAuth: false
				}
			},
			{
				id: 14,
				label: '日志管理',
				iconCls: '',
				path: '/log/list',
				meta: {
					title: '日志管理',
					requireAuth: false
				}
			},
			{
				id: 15,
				label: '设置',
				iconCls: 'el-icon-goods',
				path: '/log/reply',
				meta: {
					title: '设置管理',
					requireAuth: false
				},
				children: [
					{
						id: 17,
						label: '音乐管理',
						iconCls: '',
						path: '/music/list',
						meta: {
							title: '音乐管理',
							requireAuth: false
						}
					},
					{
						id: 18,
						label: '歌手管理',
						iconCls: '',
						path: '/singer/list',
						meta: {
							title: '歌手管理',
							requireAuth: false
						}
					}
				]
			}
		]
	}
]
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
}
</style>
